﻿<%@ Page Title="Города" Language="VB" MasterPageFile="~/adminnew/Layout.master" AutoEventWireup="false" CodeFile="Cities.aspx.vb" Inherits="adminnew_Cities" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder" runat="Server">
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing"></script>
    <script type="text/javascript"> 
        var map;
        var currentMarker;

        function initialize() {
            var mapOptions = {
                center: new google.maps.LatLng(48, 68),
                zoom: 4
            };

            map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);

            var drawingManager = new google.maps.drawing.DrawingManager({
                drawingControl: true,
                drawingControlOptions: {
                    position: google.maps.ControlPosition.TOP_CENTER,
                    drawingModes: [
                      google.maps.drawing.OverlayType.MARKER
                    ]
                },
                markerOptions: {
                    animation: google.maps.Animation.DROP,
                    icon: new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/icons/yellow-dot.png'),
                    draggable: true,
                    flat: true,
                    raiseOnDrag: true
                },
                circleOptions: {
                    fillColor: '#ffff00',
                    fillOpacity: 1,
                    strokeWeight: 5,
                    clickable: false,
                    editable: true,
                    zIndex: 1
                },
                markercomplete: function () {

                    alert(1);

                }
            });

            drawingManager.setMap(map);

            google.maps.event.addDomListener(drawingManager, 'markercomplete', function (marker) {

                currentMarker = this;

                $("#city_name").val("Введите название");
                $("#marker_options").show();
                $("#city_position").val(marker.getPosition());

                google.maps.event.addListener(marker, 'click', function (marker) {
                    $("#marker_options").show();

                    if (currentMarker != null) currentMarker.setAnimation(null);
                    $("#city_name").val(this.getTitle());
                    currentMarker = this;

                    $("#city_id").val("");
                    $("#city_position").val(this.getPosition());

                });
                //google.maps.event.addListener(marker, 'radius_changed', function () {
                //    radius = circle.getRadius();
                //    alert(radius);
                //});
            });


            <%
        
        Dim _context As TaxiEntities = New TaxiEntities()

        Dim cities = _context.cities.Where(Function(x) 1 = 1).AsEnumerable().Where(Function(x) IsNothing(x.city_position) = False).Where(Function(x) x.city_position <> "")
        
        Dim Num As Integer = 1
        
        For Each c As cities In cities
        
            Dim coord As String = c.city_position
            
            coord = Replace(coord, ", ", "#")
            
            coord = Replace(coord, ",", ".")
            
            coord = Replace(coord, "#", ", ")
            
            %>

             var marker<%= Num%> = new google.maps.Marker({
                 position: new google.maps.LatLng(<%= coord%>),
                 map: map,
                 title: '<%= c.city_name %>'
             });
            marker<%=Num%>.setTitle("<%= c.city_name %>");
             google.maps.event.addListener(marker<%= Num %>, 'click', function (marker) {
                 $("#marker_options").show();

                 //$("#map-canvas").animate({ "width": "70%" });
                 if (currentMarker != null) currentMarker.setAnimation(null);

                 currentMarker = this;

                 //map.setCenter(marker<%= Num %>.getPosition());
                 $("#city_name").val(this.getTitle());
                 $("#city_id").val("<%=c.city_id.ToString() %>");
                $("#city_position").val(this.getPosition());

             });
            <%Num += 1
    Next%>
         }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <style>
        #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
    
    <h2 class="page-header" style="margin: 20px 0 10px 0;"><%=Master.Page.Title%></h2>

    <div class="row">

        <div class="row" style="padding-left: 35px; padding-right: 35px; height: 400px;">
            <table style="width: 100%; height: 400px;">
                <tr>
                    <td style="width: 70%;" valign="top">
                        <div id="map-canvas" style="width: 100%;"></div>
                    </td>
                    <td valign="top" style="padding-left: 10px;">
                        <div id="marker_options" style="">
                            <b>Редактирование маркера</b>
                            <div style="padding-top: 10px;">
                                <input name="city_id" id="city_id" type="hidden" value="" />
                                <input name="city_position" id="city_position" type="hidden" value="" />
                                <input name="city_name" id="city_name" type="text" value="" />
                                <br /><br />
                                <a class="btn btn-primary" id="btn-save">Обновить</a>
                                <a class="btn btn-primary" id="btn-delete">Удалить</a>
                                <br />
                                <br />
                                <a class="btn btn-primary" id="showActive">Показать активный маркер</a>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>


    <script type="text/javascript">
        $(document).ready(function () {
            setActivePage(5);

            $("#showActive").click(function () {
                if (currentMarker != null) {
                    currentMarker.setAnimation(google.maps.Animation.BOUNCE);
                }
                return false;
            });

            $("#btn-delete").click(function () {
                window.location = '?delid=' + $("#city_id").val();
            });

            $("#btn-save").click(function () {
                var Text = $("#city_name").val();
                if (Text != null && Text != "") {
                    window.location.href = '?name=' + Text + '&id=' + $("#city_id").val() + '&loc=' + $("#city_position").val();
                }
                return false;
            });
        });
    </script>

</asp:Content>

